<template>
    <div id="app">
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <div class="input-div">
                    <el-select v-model="value" style="width:150px">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model="input" style="width:250px"></el-input>
                    <!--<div class="block">-->
                    <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="预约时间">
                    </el-date-picker>
                    <span style="float: left">至</span>
                    <el-date-picker
                            v-model="value2"
                            type="date"
                            placeholder="预约时间">
                    </el-date-picker>
                    <!--</div>-->
                    <el-button type="primary">筛选</el-button>



                </div>

                <div style="width: 100%;
          float: left;
          margin: 5px 120px;">
                    <el-input v-model="input2" style="width:250px"></el-input>
                    <!--日期选择-->
                    <el-date-picker
                            v-model="value3"
                            type="date"
                            placeholder="下单时间">
                    </el-date-picker>
                    <span style="float: left">至</span>
                    <el-date-picker
                            v-model="value4"
                            type="date"
                            placeholder="下单时间">
                    </el-date-picker>
                </div>


                <!--店铺选择-->
                <div style="width: 100%;
          float: left;
          margin: 5px 120px;">
                    <el-select style="width:200px">
                        <el-option
                                v-for="item in shopname"
                                :label="item.name"
                        >
                        </el-option>
                    </el-select>
                </div>

            </div></el-col>
        </el-row>
        <div>
            <!--预约订单的分类-->
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="今日" name="first">
                    <!--表格-->
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="ordernum"
                                label="订单号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="desknum"
                                label="桌号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="ordershop"
                                label="预约门店"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="ordermessage"
                                label="预约信息"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="下单时间"
                                sortable
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="状态"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                >
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="全部" name="second">
                    <!--表格-->
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="ordernum"
                                label="订单号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="desknum"
                                label="桌号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="ordershop"
                                label="预约门店"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="ordermessage"
                                label="预约信息"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="下单时间"
                                sortable
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="状态"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                >
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="未付款" name="third">
                    <!--表格-->
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="ordernum"
                                label="订单号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="desknum"
                                label="桌号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="ordershop"
                                label="预约门店"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="ordermessage"
                                label="预约信息"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="下单时间"
                                sortable
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="状态"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                >
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="待确认" name="fourth">
                    <!--表格-->
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="ordernum"
                                label="订单号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="desknum"
                                label="桌号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="ordershop"
                                label="预约门店"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="ordermessage"
                                label="预约信息"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="下单时间"
                                sortable
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="状态"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                >
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="待消费" name="fifth">
                    <!--表格-->
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="ordernum"
                                label="订单号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="desknum"
                                label="桌号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="ordershop"
                                label="预约门店"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="ordermessage"
                                label="预约信息"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="下单时间"
                                sortable
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="状态"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                :formatter="formatter">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="完成" name="sixth">
                    <!--表格-->
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                        <el-table-column
                                prop="ordernum"
                                label="订单号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="desknum"
                                label="桌号"
                                sortable
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="ordershop"
                                label="预约门店"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="ordermessage"
                                label="预约信息"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="date"
                                label="下单时间"
                                sortable
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="状态"
                                :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                >
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <!--表格-->
            <!--<el-table-->
                    <!--:data="tableData"-->
                    <!--style="width: 100%"-->
                    <!--:default-sort = "{prop: 'date', order: 'descending'}"-->
            <!--&gt;-->
                <!--<el-table-column-->
                        <!--prop="ordernum"-->
                        <!--label="订单号"-->
                        <!--sortable-->
                        <!--width="180">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="desknum"-->
                        <!--label="桌号"-->
                        <!--sortable-->
                        <!--width="180">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="ordershop"-->
                        <!--label="预约门店"-->
                        <!--:formatter="formatter">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="ordermessage"-->
                        <!--label="预约信息"-->
                        <!--:formatter="formatter">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="date"-->
                        <!--label="下单时间"-->
                        <!--sortable-->
                        <!--:formatter="formatter">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="status"-->
                        <!--label="状态"-->
                        <!--:formatter="formatter">-->
                <!--</el-table-column>-->
                <!--<el-table-column-->
                        <!--prop="operate"-->
                        <!--label="操作"-->
                        <!--:formatter="formatter">-->
                <!--</el-table-column>-->
            <!--</el-table>-->


        </div>

        <!--分页-->
        <!--<div class="block">-->
        <span class="demonstration" style="margin: 0 auto"></span>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="40">
            <!--:total   数据总条数-->
        </el-pagination>
        <!--</div>-->
    </div>
</template>

<style>


    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }




    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .input-div{
        width: 100%;
        float: left;
        margin: 5px 120px;
    }
    .el-select{
        float: left;
        margin-right: 10px;

    }
    .el-input{
        width:230px;
        float: left;
    }
    .block{
        width: 500px;
        float: left;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .bg-purple-dark {
        background: #e6e6e6;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 200px;
    }

</style>

<script>
    export default {
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '手机号'
                }, {
                    value: '选项2',
                    label: '预约姓名'
                }],
                shopname:[{
                    name:''
                },{
                    name:''
                }
                ],
                value: '手机号',
                input: '',
                input2:'',
                value1:'',
                value2:'',
                value3:'',
                value4:'',
                activeName: 'first',
                tableData: [{
                    ordernum:'',
                    desknum:'',
                    ordershop:'',
                    ordermessage:'4',
                    date: '2016-05-02',
                    status: 'xxx',
                    // operate: '<a>删除</a><a>修改</a>'
                }, {
                    ordernum:'',
                    desknum:'',
                    ordershop:'',
                    ordermessage:'3',
                    date: '2016-05-04',
                    status: 'xxx',
                    // operate: '<a>删除</a><a>修改</a>'
                }, {
                    ordernum:'',
                    desknum:'',
                    ordershop:'',
                    ordermessage:'2',
                    date: '2016-05-01',
                    status: 'xxx',
                    // operate: '<a>删除</a><a>修改</a>'
                }, {
                    ordernum:'',
                    desknum:'',
                    ordershop:'',
                    ordermessage:'1',
                    date: '2016-05-03',
                    status: 'xxx',
                    // operate: '<a>删除</a><a>修改</a>'
                }]
            }
        },methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            handleEdit(index, row) {

                console.log(`当前${index}`);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        }
    }
</script>